<template>
	<div id="J_feeds" aria-label="为你推荐" tabindex="0">
		<div class="more2">
			<div class="floorhd">
				<div class="grid_c1 floorhd_inner">
					<h3 class="floorhd_tit">为你推荐</h3>
				</div>
			</div>
			<div class="grid_c1 feed-tab-wrapper">
				<ul class="feed-tab">
					<li
						id="feedTab0"
						class="feed-tab__item feed-tab__item--active"
						clstag="h|keycount|feed|top_01"
						tabindex="0"
						aria-label="精选 猜你喜欢"
						role="tab"
						aria-selected="true"
						aria-controls="feedContent0"
					>
						<div class="feed-tab__item-title">
							<span class="feed-tab__item-title-text">精选</span>
						</div>
						<div class="feed-tab__item-desc">猜你喜欢</div>
						<div class="feed-tab__item-gap"></div>
					</li>
					<li
						id="feedTab1"
						class="feed-tab__item"
						clstag="h|keycount|feed|top_02"
						tabindex="-1"
						aria-label="智能先锋 大电器城"
						role="tab"
						aria-controls="feedContent1"
					>
						<div class="feed-tab__item-title">
							<span class="feed-tab__item-title-text">智能先锋</span>
						</div>
						<div class="feed-tab__item-desc">大电器城</div>
						<div class="feed-tab__item-gap"></div>
					</li>
					<li
						id="feedTab2"
						class="feed-tab__item"
						clstag="h|keycount|feed|top_03"
						tabindex="-1"
						aria-label="居家优品 品质生活"
						role="tab"
						aria-controls="feedContent2"
					>
						<div class="feed-tab__item-title">
							<span class="feed-tab__item-title-text">居家优品</span>
						</div>
						<div class="feed-tab__item-desc">品质生活</div>
						<div class="feed-tab__item-gap"></div>
					</li>
					<li
						id="feedTab3"
						class="feed-tab__item"
						clstag="h|keycount|feed|top_04"
						tabindex="-1"
						aria-label="超市百货 百货生鲜"
						role="tab"
						aria-controls="feedContent3"
					>
						<div class="feed-tab__item-title">
							<span class="feed-tab__item-title-text">超市百货</span>
						</div>
						<div class="feed-tab__item-desc">百货生鲜</div>
						<div class="feed-tab__item-gap"></div>
					</li>
					<li
						id="feedTab4"
						class="feed-tab__item"
						clstag="h|keycount|feed|top_05"
						tabindex="-1"
						aria-label="时尚达人 美妆穿搭"
						role="tab"
						aria-controls="feedContent4"
					>
						<div class="feed-tab__item-title">
							<span class="feed-tab__item-title-text">时尚达人</span>
						</div>
						<div class="feed-tab__item-desc">美妆穿搭</div>
						<div class="feed-tab__item-gap"></div>
					</li>
					<li
						id="feedTab5"
						class="feed-tab__item"
						clstag="h|keycount|feed|top_06"
						tabindex="-1"
						aria-label="进口好物 京东国际"
						role="tab"
						aria-controls="feedContent5"
					>
						<div class="feed-tab__item-title">
							<span class="feed-tab__item-title-text">进口好物</span>
						</div>
						<div class="feed-tab__item-desc">京东国际</div>
					</li>
				</ul>
			</div>
			<div class="grid_c1 more2_inner" clstag="a">
				<div>
					<ul
						id="feedContent0"
						class="more2_list clearfix"
						role="tabpanel"
						aria-labelledby="feedTab0"
					>
						<!-- goods:{{goods}} -->
						<!-- 
        const { t, target_url, img, jp } = item;
        const yuan = regPrice.exec(jp)[1];
        const odd = regPrice.exec(jp)[2];

        html += `<li class="more2_item more2_item_good hover-on"><span class="more2_item_gdot"></span><a class="more2_lk"
        href="${target_url}" target="_blank"
        title="${t}"
        aria-label="${t}"
        clstag="h|keycount|feed|01#pd_001-a">
        <div class="lazyimg lazyimg_loaded more2_img">
        <img src="//img12.360buyimg.com/jdcms/s150x150_${img}"
                class="lazyimg_img"
                alt="${t}"></div>
        <div class="more2_info">
            <p class="more2_info_name">${t}</p>
            <div class="more2_info_price more2_info_price_plus more2_info_price_newcomer">
                <div class="mod_price"><i>¥</i><span class="more2_info_price_txt">${yuan}.<span
                            class="more2_info_price_txt-decimal">${odd}</span></span></div>
            </div>
        </div>
        <div class="more2_item_hover">
            <div class="more2_item_delete" clstag="h|keycount||feed|01#pd_001-b" title="不喜欢"></div>
            <div class="more2_item_hd" title="">
                <div class="more2_item_btn more2_btn_find enable" clstag="h|keycount||feed|01#pd_001-c"><i
                        class="more2_btn_icon"></i><span>找相似</span></div>
            </div>
        </div>
    </a>
        </li>`;
						 -->
						<li
							v-for="{ t, target_url, img, jp } in goods"
							class="more2_item more2_item_good hover-on"
						>
							<span class="more2_item_gdot"></span
							><a
								class="more2_lk"
								:href="target_url"
								target="_blank"
								:title="t"
								:aria-label="t"
								clstag="h|keycount|feed|01#pd_001-a"
							>
								<div class="lazyimg lazyimg_loaded more2_img">
									<img
										:src="`//img12.360buyimg.com/jdcms/s150x150_${img}`"
										class="lazyimg_img"
										:alt="t"
									/>
								</div>
								<div class="more2_info">
									<p class="more2_info_name">{{ t }}</p>
									<div
										class="
											more2_info_price
											more2_info_price_plus
											more2_info_price_newcomer
										"
									>
										<div class="mod_price">
											<i>¥</i
											><span class="more2_info_price_txt"
												>{{ splitAmount(jp).yuan }}.<span
													class="more2_info_price_txt-decimal"
													>{{ splitAmount(jp).odd }}</span
												></span
											>
										</div>
									</div>
								</div>
								<div class="more2_item_hover">
									<div
										class="more2_item_delete"
										clstag="h|keycount||feed|01#pd_001-b"
										title="不喜欢"
									></div>
									<div class="more2_item_hd" title="">
										<div
											class="more2_item_btn more2_btn_find enable"
											clstag="h|keycount||feed|01#pd_001-c"
										>
											<i class="more2_btn_icon"></i><span>找相似</span>
										</div>
									</div>
								</div>
							</a>
						</li>
					</ul>

					<div class="more2_loading">
						<em style="background-color: rgb(88, 88, 87)"></em>
						<em style="background-color: rgb(150, 151, 150)"></em>
						<em style="background-color: rgb(209, 210, 208)"></em>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import "./css/feed.chunk.css";
	import { splitAmount } from "@/utils/currency_util";
	import { mapGetters, mapActions, mapState } from "vuex";

	export default {
		data() {
			return {
				// goods: [],
				currentPage: 0,
				isLoading: false,
			};
		},
		computed: {
			...mapState(["goods","goodsLoading"]),
		},
		methods: {
			splitAmount,
			...mapGetters(["getGoodsByPageSync"]),
			...mapActions(["getGoodsByPage"]),
			loadNextPage() {

				if (!this.goodsLoading) {
					console.log("loadNextPage");
					this.isLoading = true

					this.currentPage++;
					const pageArr = this.getGoodsByPageSync()(this.currentPage);
					console.log("pageArr=", this.currentPage, pageArr);

					if (!pageArr?.length) {
						console.log("联网加载商品数据");
						this.getGoodsByPage(++this.currentPage);
					} else {
						console.log("使用缓存的商品数据");
					}
				}

			},
		},
		async mounted() {
			this.loadNextPage();
		},

		// props: [],
		// emits: [],
		expose: ["loadNextPage"],
	};
</script>

<style lang="scss" scoped>

</style>